<template>
    <div class="deviceTable">
        <div class="seatch">
            <div class="searchBar_item">
                <span class="label">一级系统</span>
                <searchBarItem :activeindex="activeindex_system" :list_search="listData.system_list"
                    @changeActiveIndex="changeSystem"></searchBarItem>
            </div>
            <div class="searchBar_item">
                <span class="label">二级系统</span>
                <searchBarItem :activeindex="activeindex_category" :list_search="listData.category_list"
                    @changeActiveIndex="changeCategory"></searchBarItem>
            </div>
            <div class="line"></div>
            <div class="searchBar_item2">
                <span class="label2">设备类别:</span>
                <searchBarItem2 :activeindex="activeindex_type" :list_search="listData.type_list"
                    @changeActiveIndex="changeType"></searchBarItem2>
            </div>
            <div class="searchBar_item2">
                <span class="label2">设备类型:</span>
                <searchBarItem2 :activeindex="activeindex_deviceType" :list_search="listData.deviceType_list"
                    @changeActiveIndex="changeDeviceType"></searchBarItem2>
            </div>
            <div class="searchBar_content">
                <div class="left">
                    <el-form class="form" :model="searchData" label-position="left">
                        <el-form-item label="设备名称" class="code">
                            <el-input v-model="searchData.name" placeholder="" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="设备编号">
                            <el-input v-model="searchData.num" placeholder="" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="设备属性">
                            <el-radio-group v-model="searchData.name">
                                <el-radio label="1">全部</el-radio>
                                <el-radio label="2">远程监控设备</el-radio>
                                <el-radio label="3">非远程监控设备</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="设备类型">
                            <el-radio-group v-model="searchData.name2">
                                <el-radio label="1">全部</el-radio>
                                <el-radio label="2">主设备</el-radio>
                                <el-radio label="3">附属设备</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="right">
                    <div class="btn">重置</div>
                    <div class="btn btn2">搜索</div>
                </div>
            </div>

        </div>
        <div class="tableBg">
            <el-table :data="state.data" style="width :100%;" border stripe :scrollbar-always-on="true">
                <el-table-column prop="t1" label="所属系统" class-name="column_date" align="left" />
                <el-table-column prop="t2" label="设备类别" class-name="column_date" align="left" />
                <el-table-column prop="t3" label="设备类型" class-name="column_common" align="left" />
                <el-table-column prop="t4" label="设备名称" align="left" />
                <el-table-column prop="t5" label="设备编号" align="left" />
                <el-table-column prop="t6" label="设备属性" align="left" />
                <el-table-column prop="t7" label="是否附属设备" align="left" />
                <el-table-column class-name="last" label="操作" align="left">
                    <template #default="scope: any">
                        <span class="btn_1">查看</span>
                        <span class="btn_2">定位</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <CommonPagination2 :pageNum="searchData.pageNum" :pageSize="searchData.pageSize" :pageTotal="total"
        @pageFunc="pageFunc" @sizeChange="sizeChange"></CommonPagination2>
    </div>
</template>

<script setup lang="ts">
import searchBarItem from "./searchBarItem.vue";
import searchBarItem2 from "./searchBarItem2.vue";
import CommonPagination2 from "@/components/commonPagination2.vue"
interface Ilist {
    childList: [];
    code: string;
    codePath: string;
    id: string;
    idPath: string;
    level: number;
    name: string;
    parentId: string;
}
let activeindex_system = ref(0); //一级系统当前选中下标
let activeindex_category = ref(0); //二级系统当前选中下标
let activeindex_type = ref(0); //设备类型当前选中下标
let activeindex_deviceType = ref(0); //设备类别当前选中下标
let state = reactive({
    data: [
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
    ]
})
let listData = reactive({
    system_list: [] as Array<Ilist>,
    category_list: [] as Array<Ilist>,
    type_list: [] as Array<Ilist>,
    deviceType_list: [] as Array<Ilist>,
})
let res = [{
    "id": "1663835411279613954",
    "name": "锅炉系统",
    "code": "04",
    "parentId": "0",
    "idPath": "1663835411279613954",
    "codePath": "04",
    "level": 1,
    "childList": [
        {
            "id": "1663835540724224001",
            "name": "锅炉燃烧系统",
            "code": "01",
            "parentId": "1663835411279613954",
            "idPath": "1663835411279613954,1663835540724224001",
            "codePath": "04_01",
            "level": 2,
            "childList": [
                {
                    "id": "1663835613902245889",
                    "name": "锅炉燃烧器",
                    "code": "01",
                    "parentId": "1663835540724224001",
                    "idPath": "1663835411279613954,1663835540724224001,1663835613902245889",
                    "codePath": "04_01_01",
                    "level": 3,
                    "childList": [
                        {
                            "id": "1663835665701900290",
                            "name": "燃烧炉",
                            "code": "01",
                            "parentId": "1663835613902245889",
                            "idPath": "1663835411279613954,1663835540724224001,1663835613902245889,1663835665701900290",
                            "codePath": "04_01_01_01",
                            "level": 4,
                            "childList": []
                        }
                    ]
                }
            ]
        }
    ]
},
{
    "id": "1664153032101228546",
    "name": "汽机系统",
    "code": "07",
    "parentId": "0",
    "idPath": "1664153032101228546",
    "codePath": "07",
    "level": 1,
    "childList": [
        {
            "id": "1664153109993648129",
            "name": "除氧给水系统",
            "code": "01",
            "parentId": "1664153032101228546",
            "idPath": "1664153032101228546,1664153109993648129",
            "codePath": "07_01",
            "level": 2,
            "childList": [
                {
                    "id": "1664153190989852674",
                    "name": "凝结水组件",
                    "code": "01",
                    "parentId": "1664153109993648129",
                    "idPath": "1664153032101228546,1664153109993648129,1664153190989852674",
                    "codePath": "07_01_01",
                    "level": 3,
                    "childList": [
                        {
                            "id": "1664153733355302914",
                            "name": "给水泵",
                            "code": "01",
                            "parentId": "1664153190989852674",
                            "idPath": "1664153032101228546,1664153109993648129,1664153190989852674,1664153733355302914",
                            "codePath": "07_01_01_01",
                            "level": 4,
                            "childList": []
                        },
                        {
                            "id": "1664153988847136770",
                            "name": "疏水箱",
                            "code": "02",
                            "parentId": "1664153190989852674",
                            "idPath": "1664153032101228546,1664153109993648129,1664153190989852674,1664153988847136770",
                            "codePath": "07_01_01_02",
                            "level": 4,
                            "childList": []
                        },
                        {
                            "id": "1664154029305393154",
                            "name": "抽汽器",
                            "code": "03",
                            "parentId": "1664153190989852674",
                            "idPath": "1664153032101228546,1664153109993648129,1664153190989852674,1664154029305393154",
                            "codePath": "07_01_01_03",
                            "level": 4,
                            "childList": []
                        }
                    ]
                }
            ]
        }
    ]
}] as any
listData.system_list = [{ code: "", codePath: "", id: "", idPath: "", level: 1, name: "全部", parentId: "", childList: [] }];
if (res) {
    listData.system_list = listData.system_list.concat(res);
}
listData.category_list = [{ code: "", codePath: "", id: "", idPath: "", level: 2, name: "全部", parentId: "", childList: [] }];
listData.type_list = [{ code: "", codePath: "", id: "", idPath: "", level: 3, name: "全部", parentId: "", childList: [] }];
listData.deviceType_list = [{ code: "", codePath: "", id: "", idPath: "", level: 4, name: "全部", parentId: "", childList: [] }];
const searchData = reactive({
    name: "1", //名称
    name2: '1',
    state: -1, //状态-1 -全部，0-离线，1-在线/运行
    runState: -1, //运行状态1-运行，2-停止，3-故障，4-离线
    num: '', //编号
    systemId: "", //一级系统id
    categoryId: "", //二级系统id
    typeId: "", //类型id
    deviceTypeId: '', //类别id

    buildingId: "", //建筑物区域id
    floorId: "", //楼层id
    roomId: "", //房间id
    stationId: "", //工位id
    location: "", //位置

    pageNum: 1, //当前页
    pageSize: 10, //每页条目数
    params: {
        alarmLevelId: "",//报警等级id
        alarmTypeId: "",//报警类型id
        name: '',//规则名称
        state: null,//状态：0-禁用，1-启用
    } 
})
let total = ref(200);//总条数

//页数改变事件(上一页,下一页,跳转到某一页)
const pageFunc = (pageNum:number) => {
  searchData.pageNum = pageNum;
//   if (tableComponent.value) {
//     tableComponent.value.getList();
//   }
}

//每页条数改变
const sizeChange = (pageSize: number) => {
  searchData.pageSize = pageSize;
//   if (tableComponent.value) {
//     tableComponent.value.getList();
//   }
}

//改变一级系统tab栏
const changeSystem = (num: number) => {
    if (activeindex_system.value != num) {
        activeindex_system.value = num;
        searchData.systemId = listData.system_list[num].id; //系统id
        listData.category_list = [{ code: "", codePath: "", id: "", idPath: "", level: 2, name: "全部", parentId: "", childList: [] }];
        if (listData.system_list[num].childList) {
            listData.category_list = listData.category_list.concat(listData.system_list[num].childList); //类别列表
        }
        listData.type_list = [{ code: "", codePath: "", id: "", idPath: "", level: 3, name: "全部", parentId: "", childList: [] }];
        listData.deviceType_list = [{ code: "", codePath: "", id: "", idPath: "", level: 4, name: "全部", parentId: "", childList: [] }];
        searchData.categoryId = "";
        searchData.typeId = "";
        searchData.deviceTypeId = "";
        activeindex_category.value = 0;
        activeindex_type.value = 0;
        activeindex_deviceType.value = 0;
        searchList();
    }

}
//改变二级系统tab栏 
const changeCategory = (num: number) => {
    if (activeindex_category.value != num) {
        activeindex_category.value = num;
        searchData.categoryId = listData.category_list[num].id;
        listData.type_list = [{ code: "", codePath: "", id: "", idPath: "", level: 3, name: "全部", parentId: "", childList: [] }];
        if (listData.category_list[num].childList) {
            listData.type_list = listData.type_list.concat(listData.category_list[num].childList);
        }
        listData.deviceType_list = [{ code: "", codePath: "", id: "", idPath: "", level: 4, name: "全部", parentId: "", childList: [] }];
        searchData.typeId = "";
        searchData.deviceTypeId = "";
        activeindex_type.value = 0;
        activeindex_deviceType.value = 0;
        searchList();
    }
}

//改变设备类型tab栏
const changeType = (num: number) => {
    if (activeindex_type.value != num) {
        activeindex_type.value = num;
        searchData.typeId = listData.type_list[num].id;
        // if (listData.type_list[num].childList) {
        //     listData.deviceType_list = listData.type_list[num].childList;
        //     if (listData.deviceType_list.length > 0) {
        //         searchData.deviceTypeId = listData.deviceType_list[0].id;
        //     } else {
        //         searchData.deviceTypeId = "";
        //     }
        // } else {
        //     listData.deviceType_list = [];
        //     searchData.deviceTypeId = "";
        // }
        listData.deviceType_list = [{ code: "", codePath: "", id: "", idPath: "", level: 4, name: "全部", parentId: "", childList: [] }];
        if (listData.type_list[num].childList) {
            listData.deviceType_list = listData.deviceType_list.concat(listData.type_list[num].childList);
        }
        searchData.deviceTypeId = "";
        activeindex_deviceType.value = 0;
        searchList();
    }

}

//改变设备分类
const changeDeviceType = (num: number) => {
    if (activeindex_deviceType.value != num) {
        activeindex_deviceType.value = num;
        searchData.deviceTypeId = listData.deviceType_list[num].id;
        searchList();
    }

}
//点击搜索按钮
const searchList = () => {
    let params = {};
}
</script>

<style lang="scss" scoped>
.deviceTable {
    position: absolute;
    z-index: 999;
    width: vw(1417);
    height: vh(947);
    left: vw(471);
    top: vh(73);

    .seatch {
        height: vh(215);
        background: rgba(9, 76, 99, 0.3);
        border-radius: vh(6);
        padding-left: vw(20);
        padding-right: vw(20);
        padding-top: vh(17);

        .searchBar_item {
            display: flex;
            position: relative;
            line-height: vw(22);

            &:last-child {
                // margin-bottom: 28px;
                margin-bottom: 0;
            }

            .label {
                font-size: vw(14);
                line-height: vw(24);
                width: vw(70);
                flex-shrink: 0;
                color: #FFFFFF;
            }
        }

        .searchBar_item2 {
            display: flex;
            position: relative;
            line-height: vw(22);

            &:last-child {
                // margin-bottom: 28px;
                margin-bottom: 0;
            }

            .label2 {
                font-size: vw(12);
                line-height: vw(26);
                width: vw(70);
                flex-shrink: 0;
                color: #00E3FE;
            }
        }

        .line {
            margin-top: vh(5);
            width: 100%;
            height: vh(1);
            background: rgba(255, 255, 255, 0.1);
        }

        .searchBar_content {
            display: flex;
            justify-content: space-between;

            .left {
                .el-form {
                    display: flex;

                    .el-form-item {
                        margin-right: vw(15);
                    }

                    :deep(.el-form-item__label) {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: vw(12);
                        color: #00E3FE;
                    }

                    :deep(.el-radio) {
                        margin-right: vw(30);

                        .el-radio__input {
                            .el-radio__inner {
                                width: vw(14);
                                height: vw(14);
                                background-color: transparent;
                                border-color: #00CCE4;
                            }

                            .el-radio__inner::after {
                                width: vw(8);
                                height: vw(8);
                                background-color: #00CCE4;
                            }
                        }

                        .el-radio__label {
                            padding-left: vw(6);
                            font-size: vw(12);
                        }
                    }

                    .el-radio:last-child {
                        margin-right: 0;
                    }
                }

                .el-input {
                    width: vw(119);
                    height: vh(18);
                    margin-right: vh(12);

                    :deep(.el-input__wrapper) {
                        background-color: rgba(11, 122, 155, 0.5);
                        box-shadow: none;
                        border: vh(1) solid #00BDE5;
                        border-radius: vh(3);

                        .el-input__inner {
                            color: #fff;
                            font-size: vw(11);
                            line-height: vh(22);
                            height: vh(22);
                        }
                    }
                }
            }

            .right {
                display: flex;
                align-items: center;
                .btn {
                    width: vw(68);
                    height: vh(25);
                    display: inline-block;
                    line-height: vh(25);
                    border: 1px solid #00AABE;
                    border-radius: vh(4);
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: vh(12);
                    color: #FFFFFF;
                    text-align: center;
                    background-color: transparent;
                    cursor: pointer;

                    &.btn2 {
                        background: #00AABE;
                        margin-left: vw(20);
                    }
                }
            }
        }
    }

    .tableBg {
        margin-top: vh(20);
        height: 50vh;

        :deep(.el-table) {
            border: 1px solid #5A7275;
            background-color: transparent;
            --el-table-border-color: transparent;

            .last {
                text-align: center;
                border-left: 1px solid #5A7275;
            }

            th {
                font-size: 12px;
                font-weight: bold;
                color: #9FF5FF;
                line-height: 1;

                border-bottom: 1px solid #5A7275;
            }

            /* 斑马纹颜色 */
            tr {
                font-size: 12px;
                font-weight: 400;
                color: #FFFFFF;
                // background: rgba(11, 26, 50, 0.6) !important;
                background-color: rgba(255, 255, 255, 0.05) !important;

                td {
                    border-bottom: 1px solid #5A7275;
                }

                &:last-child {
                    td {
                        border-bottom: none;

                    }
                }

                .el-table__cell {
                    // background: rgba(11, 26, 50, 0.6) !important;
                    background-color: rgba(255, 255, 255, 0.05) !important;
                    border-right: none;
                    padding: 0;

                    .cell {
                        line-height: vh(36);
                        height: vh(36);
                        padding: 0 vh(10);
                        font-size: vh(12);
                    }
                }
            }



            /* 非斑马纹颜色 */
            .el-table__row--striped {
                .el-table__cell {
                    // background: #2B424A !important;
                    background-color: rgba(0, 170, 190, 0.05) !important;
                }

            }
        }

        .btn_1,
        .btn_2 {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vw(12);
            color: #00E4FF;
            cursor: pointer;
        }

        .btn_1 {
            margin-right: vw(22);
        }
    }

}
</style>